Ektron CMS400.Net Reference

>>Using Widgets > Creating the “Hello World” Widget

Creating the “Hello World” Widget

To learn how to create a widget, create a simple widget in the site root/widgets folder. This widget is based on the Hello World widget that is installed with the Developer Sample site with the following files:

Step 1: Copy, Paste and Rename HelloWorld.ascx and HelloWorld.ascx.jpg

  1. Open your Web site in Visual Studio.
  2. In the Visual Studio Solution Explorer, open the widgets folder.
  3. Within that folder, scroll down to and select HelloWorld.ascx.
  4. Right click the mouse and choose Copy.
  5. Scroll up to the widgets folder.
  6. Right click the mouse and choose Paste.
  7. Scroll down until you see Copy of HelloWorld.ascx.
  8. Right click the mouse and choose Rename.
  9. Rename the file new_widget.ascx. Notice that Visual Studio also renames the codebehind file to new_widget.ascx.cs.
  10. The image file is 48 x 48 pixels and 72 dpi.
  11. Copy, paste, then rename the helloworld.ascx.jpg file to new_widget.ascx.jpg. Ektron CMS400.NET administrators (like Grace) and content authors (like the Marketing team) use a widget’s image to select it, as shown below.

Step 2: Update the Class Names in the New Files

  1. Open new_widget.ascx.
  2. On the first line of that file, replace the reference to HelloWorld (circled below) with new_widget.
  3. Open the codebehind file, new_widget.ascx.cs.
  4. Again, replace the class HelloWorld with new_widget.
  5. Save new_widget.ascx and new_widget.ascx.cs.
  6. Check both files for errors by choosing Build > Build Page. Correct any errors before proceeding.

Step 3: Add Widget in Ektron CMS400.NET Workarea

  1. Open the Ektron CMS400.NET Workarea.
  2. Choose Settings > Configuration > Personalizations > Widgets.
  3. Click Synchronize ().
  4. You see the new user control file, new_widget.ascx, at the bottom of the screen.
  5. Choose Settings > Configuration > Template Configuration.
  6. Find the template that you created in Building Pages, PageLayout.aspx. Or, any Wireframe template that you are using to create a PageBuilder page.
  7. Click Update.
  8. On the Update Template screen, scroll down until you see the new widget.
  9. Click Select All (circled in the figure).
  10. Click Save ().
  11. For directions on creating a PageBuilder page, see Steps to Creating a “PageBuilder” Page
  12. Go to Content and select a folder that has a PageBuilder page.
  13. Edit the PageBuilder page.
  14. Open the Widget menu.
  15. Make sure your new widget appears on the menu.

After you create a new widget and enable it in the Ektron CMS400.NET Workarea, you can begin to customize it. For more information about customizing widgets, see Customizing Widgets.

The next sections explain details about the files you copied and renamed above.


Visit the Ektron Dev Center at http://dev.ektron.com 1-866 - 4 - EKTRON

Ektron CMS400.NET Reference Version 8.02 SP1 Rev 1

Ektron Documentation,© 2011 Ektron, Inc.